import React from 'react';
import { connect } from 'dva';
import { List, ListView, Modal, Button, Icon } from 'antd-mobile';
import moment from 'moment';
import _ from 'lodash';
import styles from './SaleManSelectModal.less';
const Item = List.Item;
import classnames from 'classnames';

class SaleManSelectModal extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
    };
  }

  handClick = (saleman) => {
    const data = _.pick(saleman, ['sale_id', 'sale_name']);
    this.props.onOk(data);
  }

  render() {
    const { visiable, dataSource } = this.props;
    const thiz = this;

    const myData = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    const renderRow = (saleman) => {
      return (
        <Item onClick={() => this.handClick(saleman)}>
          <div className={styles['item-content']}>
            <div className={styles['item-icon']}>
              <img className={styles.image} src={saleman && saleman.pic ? saleman.pic : require("../../assets/avatar.png")} />
            </div>
            <div className={styles['item-desc']}>
              <div className={styles['item-name']}>{saleman.sale_name}</div>
              <div className={styles['item-serivce-num']}>服务次数:{saleman.service_num ? saleman.service_num : 0}</div>
              {/* <div className={styles['item-address']}>*/}
              {/* <span><img className={styles['item-address-icon']} src={require('../../assets/map.png')} /> </span>*/}
              {/* <span>{branch.address}</span>*/}
              {/* </div>*/}
              {/* <div className={styles['item-tel']}>*/}
              {/* <span><img className={styles['item-tel-icon']} src={require('../../assets/tel.png')} /> </span>*/}
              {/* <span>{branch.branch_tel}</span>*/}
              {/* </div>*/}
            </div>
          </div>
        </Item>
      );
    };

    // <Modal
    //   style={{ width: '100%', height: '100%' }}
    //   transparent
    //   popup
    //   maskClosable={false}
    //   visible={visiable}
    //   animationType="slide-up"
    // >
    //   <ListView
    //     style={{ height: document.documentElement.clientHeight, width: document.documentElement.clientWidth }}
    //     renderRow={renderRow}
    //     dataSource={myData.cloneWithRows(dataSource || [])}
    //     pageSize={20}
    //     initialListSize={20}
    //     scrollRenderAheadDistance={500}
    //     scrollEventThrottle={20}
    //     // onEndReached={this.onEndReached}
    //     onEndReachedThreshold={100}
    //   />
    // </Modal>


    return (
      <div>
      <div className={classnames({
        [styles["bg-model"]]: true,
        [styles["show"]]:!visiable
      })}
      onClick={() => {thiz.props.onCancel()}}
      ></div>

      <div className={classnames({
        [styles["container"]]: true,
        [styles["show"]]:!visiable
      })}>
        <div className={styles["title"]}>
        请选择育婴师
        <div className={styles["close-icon"]} onClick={() => {thiz.props.onCancel()}}>
          <Icon type="cross" size="lg"/>
        </div>
        </div>

        <div className={styles["item-container"]}>
          {dataSource.map((item) => {
            return (
            <div className={styles["item"]} onClick={() => this.handClick(item)}>

            <div className={styles['item-icon']}>
              <img className={styles['item-image']} src={item && item.pic ? item.pic : require("../../assets/avatar.png")} />
            </div>

            <div className={styles["item-opt"]}>
            <span className={styles["item-title"]}>{item.sale_name}</span>
            <span className={styles["item-text"]}>服务次数:{item.service_num ? item.service_num : 0}</span>
            </div>

            
            </div>)
          })}
        </div>
      </div>
      
      </div>
    );
  }
}

export default connect(({ }) => ({ }))(SaleManSelectModal);
